// 轮播图数据
const list = [
    {
        title: '标题一',
        image: '../../images/banners/banner1.jpg',
        bottom_color: '#AB2E3E'
    },
    {
        title: '标题二',
        image: '../../images/banners/banner2.jpg',
        bottom_color: '#2c84cd'
    },
    {
        title: '标题三',
        image: '../../images/banners/banner3.jpg',
        bottom_color: '#49a4d8'
    },
];

// 全局变量
let timer = null; // 定时器
let activeIndex = 0; // 当前轮播下标
let isPrev = false; // 是否点击上一张(控制吃豆人朝向)

// DOM元素
const imgBox = document.querySelector('.img-box');
const titleElement = document.getElementById('title');
const dotsContainer = document.getElementById('dots');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const bottomBox = document.querySelector('.bottom-box');

// 初始化函数
function init() {
    // 生成图片
    generateImages();
    // 生成指示器
    generateDots();
    // 绑定事件
    bindEvents();
    // 初始化显示
    updateDisplay();
    // 开始自动轮播
    startAutoPlay();
}

// 生成图片
function generateImages() {
    list.forEach(item => {
        const img = document.createElement('img');
        img.src = item.image;
        img.alt = item.title;
        imgBox.appendChild(img);
    });
}

// 生成指示器
function generateDots() {
    list.forEach((item, index) => {
        const li = document.createElement('li');
        li.className = index === activeIndex ? 'pacman' : 'dot';
        if (index === activeIndex && isPrev) {
            li.classList.add('l');
        }
        
        // 为吃豆人添加两个div
        if (index === activeIndex) {
            const div1 = document.createElement('div');
            const div2 = document.createElement('div');
            li.appendChild(div1);
            li.appendChild(div2);
        }
        
        li.addEventListener('click', () => changeBanner(index));
        dotsContainer.appendChild(li);
    });
}

// 绑定事件
function bindEvents() {
    // 鼠标悬停停止轮播
    document.getElementById('app').addEventListener('mouseover', stopAutoPlay);
    document.getElementById('app').addEventListener('mouseout', startAutoPlay);
    
    // 上一张下一张按钮
    prevBtn.addEventListener('click', () => changeBanner(-1, true));
    nextBtn.addEventListener('click', () => changeBanner(-1, false));
}

// 停止轮播
function stopAutoPlay() {
    // 清空定时器
    for (let i = 0; i <= timer; i++) {
        clearInterval(i);
    }
}

// 开始轮播
function startAutoPlay() {
    // 停止轮播
    stopAutoPlay();
    timer = setInterval(function() {
        activeIndex++;
        if (activeIndex > list.length - 1) {
            activeIndex = 0;
        }
        isPrev = false;
        changeBanner(activeIndex);
    }, 3000);
}

// 切换banner
function changeBanner(index, isPrevParam) {
    if (index >= 0) {
        // 点击指示器时
        // 默认是下一张,吃豆人向右
        isPrev = false;
        if (index < activeIndex) {
            // 点击时轮播下标小于当前轮播下标时,则为上一张,吃豆人向左
            isPrev = true;
        }
        // 设置当前轮播下标
        activeIndex = index;
    } else {
        // 点击按钮时
        if (isPrevParam) {
            // 上一张
            activeIndex--;
            if (activeIndex < 0) {
                activeIndex = list.length - 1;
            }
        } else {
            // 下一张
            activeIndex++;
            if (activeIndex > list.length - 1) {
                activeIndex = 0;
            }
        }
        // 指明上一张或下一张
        isPrev = isPrevParam;
    }
    
    // 更新显示
    updateDisplay();
}

// 更新显示
function updateDisplay() {
    // 设置偏移量以达到显示指定图片的目的
    imgBox.style.setProperty('--m-left', activeIndex);
    
    // 设置图片底部的渐变效果
    bottomBox.style.setProperty('--b-color', list[activeIndex].bottom_color);
    
    // 更新标题
    titleElement.textContent = list[activeIndex].title;
    
    // 更新指示器
    updateDots();
}

// 更新指示器
function updateDots() {
    const dots = dotsContainer.querySelectorAll('li');
    dots.forEach((dot, index) => {
        // 移除所有类
        dot.className = '';
        dot.innerHTML = '';
        
        if (index === activeIndex) {
            dot.className = 'pacman';
            if (isPrev) {
                dot.classList.add('l');
            }
            // 为吃豆人添加两个div
            const div1 = document.createElement('div');
            const div2 = document.createElement('div');
            dot.appendChild(div1);
            dot.appendChild(div2);
        } else {
            dot.className = 'dot';
        }
    });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', init);